;
(function (call) {
    var main = {
        mapId: "tjMap",
        productList: [//UV,TMP,RH,W
			{ proId: 'RHVOR', name: '湿涡度', selected: true, className: 'productName', height: '100,150,200,250,300,400,500,700,850,1000' },
			{ proId: 'RHDIV', name: '湿散度', selected: true, className: 'productName', height: '100,150,200,250,300,400,500,700,850,1000' },
            { proId: 'HGT,TMP', name: '高度（等值线）+温度', selected: true, className: 'productName', height: '100,150,200,250,300,400,500,700,850,1000' },
			{ proId: 'Q,W', name: '比湿+垂直速度', selected: true, className: 'productName', height: '100,150,200,250,300,400,500,700,850,1000' },
			{ proId: 'U,V', name: 'U分量+V分量', selected: true, className: 'productName', height: '100,150,200,250,300,400,500,700,850,1000' }
            //{ proId: 'UV,TMP,Q,W', name: 'U+V（等值线）', selected: false, className: 'productName', height: '100,150,200,250,300,400,500,700,850,1000' },
        ],
        timeline: {
            firstItemIndex: 0,
            selectedIndex: 0,
            timeItemShowCount: 22,
            timeItems: [],
            aging: '000'
        },
        router: {
            //spaceProfile: '/drawmake/makeprofile/spaceProfile'
			spaceProfile: '/drawmake/makeprofile/spaceProfileForEra5',
        },
        init: function () {
            this.initDatePicker();
            this.initProduct();
            this.bindEvt();
        },
        // 初始化时间控件
        initDatePicker: function () {
            var that = this;
            var time = $("#modal_line_pro").data('time');
            that.datepicker = CafeJS.Datepicker({
                curDate: time,
                appendTo: "#lineProfile-datepicker",
                dateFmt: "yyyy-MM-dd",
                type: 5,
                timeInterval: 12,
                dateType: 'H',
                customHm: [8, 20],
                call: function () {
                    $('.timelineBox').empty();
                    that.resetTimeline();
                    that.getProfile();
                },
            });
            that.resetTimeline();
        },
        //初始化类型
        initProduct: function () {
            var that = this;
            var $product = $('.vrm-items');
            that.productList.forEach(function (item) {
                if (item.selected) {
                    var div = '<div class="active ' + item.className + '">' + item.name + '</div>'
                } else {
                    var div = '<div class="' + item.className + '">' + item.name + '</div>'
                }
                var $div = $(div);
                $div.data('item', item);
                $product.append($div);
            })
            $('.vrm-items div').eq(0).click();
        },
        // 时间轴
        resetTimeline: function () {
            // 时效000-144（6天）间隔3小时；时效144-240（4天）间隔6小时
            this.timeline.timeItems.splice(0);

            var itemObj = new Date(this.datepicker.getVal());
            var minTime = new Date(this.datepicker.getVal()).setHours(itemObj.getHours() + 24 * 10);
            var aging = 0;
            var hourInterval = 3;
            var item = null;
            var index = 0;
            while (itemObj <= minTime) {
                item = this.makeTimeItem(itemObj, aging, item, index)
                this.timeline.timeItems.push(item);

                if (aging == Number(this.timeline.aging)) {
                    this.timeline.selectedIndex = index;
                    this.changePage();
                }

                if (aging >= 144) {
                    hourInterval = 6;
                }
                itemObj.setHours(itemObj.getHours() + hourInterval);
                aging += hourInterval;
                index++;
            }
        },
        makeTimeItem: function (time, aging, preTimeItem, index) {
            var hour = time.getHours();
            var label = this.addZero(hour);
            var timeClass = '';

            if (preTimeItem && preTimeItem.label.length == 2 && preTimeItem.label > label) {
                label = time.format('MM-dd');
                timeClass = 'firstItem';
            }
            aging = (Array(3).join('0') + aging).slice(-3);
            var result = {
                time: time.format('yyyy-MM-dd hh:mm'),
                label: label,
                className: timeClass,
                aging: aging
            };
            $('.timelineBox').append(`<div style="display:${this.isItemShow(index)}" aging="${aging}" 
            title="${result.time}" class="${result.className} ${index === 0 ? 'active' : ''}">${result.label}</div>`);
            return result;
        },
        isItemShow: function (index) {
            if (index >= this.timeline.firstItemIndex && index < this.timeline.firstItemIndex + this.timeline.timeItemShowCount) {
                return 'block';
            } else {
                return 'none';
            }
        },
        addZero: function (v) {
            var str = v.toString();
            if (str.length == 1) {
                return '0' + str;
            } else {
                return str;
            }
        },
        selectTimeItem: function (index, aging) {
            this.timeline.selectedIndex = index;
            this.timeline.aging = aging;
            this.getProfile();
        },
        goLeft: function () {
            $(".timelineBox div.active").prev().addClass('active').siblings().removeClass('active')
            if (this.timeline.selectedIndex > 0) {
                this.timeline.selectedIndex--;
                this.changePage();
            }
            this.selectTimeItem(this.timeline.selectedIndex, this.timeline.timeItems[this.timeline.selectedIndex]);
        },
        goRight: function () {
            $(".timelineBox div.active").next().addClass('active').siblings().removeClass('active')
            if (this.timeline.selectedIndex < this.timeline.timeItems.length - 1) {
                this.timeline.selectedIndex++;
                this.changePage();
            }
            this.selectTimeItem(this.timeline.selectedIndex, this.timeline.timeItems[this.timeline.selectedIndex]);
        },
        changePage: function () {
            var that = this;
            if (this.timeline.selectedIndex < this.timeline.firstItemIndex) {
                var newIndex = this.timeline.firstItemIndex - this.timeline.timeItemShowCount;
                this.timeline.firstItemIndex = newIndex >= 0 ? newIndex : 0;
            }
            if (this.timeline.selectedIndex >= this.timeline.firstItemIndex + this.timeline.timeItemShowCount) {
                var newIndex = this.timeline.firstItemIndex + this.timeline.timeItemShowCount;
                this.timeline.firstItemIndex = (newIndex + this.timeline.timeItemShowCount) < this.timeline.timeItems.length ? newIndex : (this.timeline.timeItems.length - this.timeline.timeItemShowCount);
            }
            $(".timelineBox>div").each(function (i, item) {
                if (i >= that.timeline.firstItemIndex && i < that.timeline.firstItemIndex + that.timeline.timeItemShowCount) {
                    $(item).show();
                } else {
                    $(item).hide();
                }
            })
        },
        getProfile: function () {
            var that = this;
            var pro = $(".vrm-items div.active").data('item');
            var time = new Date(that.datepicker.getVal()).format('yyyyMMddhhmmss');
            var point = $("#modal_line_pro").data('points');
            var aging = $(".timelineBox div.active").attr('aging');
            point = point.map(item => {
                return item.lon + ',' + item.lat
            })
            var points = point.join(',');
            var mode = $(".product-szyb-tab div:first-child div ul li.active").text()
            var params = {
                time: time,
                mode: mode,
                elements: pro.proId,
                heights: pro.height,
                aging: aging,
                point: points,
                number: 10
            }
			loading.add();
            $.get(that.router.spaceProfile, params, function (res) {
				loading.remove();
                $(".vrm-bottom-charts").empty().append(`<img src="data:img/png;base64,${res}" id="lineProfileDownLoad" class="lineProfile-imgPath">`)
            })
        },
        downImg: function () {
            var url = $("#lineProfileDownLoad").attr('src');
            $("#lineImg").attr('href', url);
            $("#lineImg")[0].click();
        },
        bindEvt: function () {
            var that = this;
            $(".vrm-items").on('click', 'div.productName', function () {
                $(this).addClass('active').siblings().removeClass('active')
                that.getProfile();
            })
            $('.download').click(function () {
                that.downImg();
            })
            $(".timelineWrap .left").click(function () {
                var index = $(".timelineBox div.active").index();
                var aging = $(".timelineBox div.active").attr('aging');
                that.goLeft(index, aging);
            })
            $(".timelineWrap .right").click(function () {
                var index = $(".timelineBox div.active").index();
                var aging = $(".timelineBox div.active").attr('aging');
                that.goRight(index, aging);
            })
            $(".timelineBox").on('click', 'div', function () {
                $(this).addClass('active').siblings().removeClass('active');
                var index = $(this).index();
                var aging = $(this).attr('aging');
                that.selectTimeItem(index, aging);
            })
            $(".selectBtn").click(function () {
                that.getProfile();
            })
            $(".pointBtn").click(function () {
                //$("#modal_line_pro .close").click();
                $("#modal_line_pro").remove();
                //$(".line").click();
            })
            $('.vrm-items div').eq(0).click();
        }
    };
    if (typeof call === 'function') {
        call(main);
    }
})(function (main) {
    main.init();
});
